<template>
  <div class="departments">
    <el-card class="box-card">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="20">江苏传智播客教育科技股份有限公司</el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">负责人</el-col>
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
            <el-divider> </el-divider>
          <el-tree
        :data="data"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
      <el-row style="width:100%;" slot-scope="{data}">
        <el-col :span="20">{{  data.name }}</el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="12">{{ data.manager }}</el-col>
            <el-col :span="12">
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                  <el-dropdown-item>查看部门</el-dropdown-item>
                  <el-dropdown-item>删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      </el-tree>
    </el-card>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'

export default {
  data () {
    return {
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      data: [
        {
          id: 1,
          manager: '孙彩',
          name: '总裁办',
          children: [
            {
              id: 11,
              name: '教学办',
              manager: '张三'
            }
          ]
        },
        {
          id: 2,
          name: '行政部',
          manager: '罗通'
        },
        {
          id: 3,
          name: '人事部',
          manager: '李四'
        }
      ]
    }
  }
}
</script>

<style>
.box-card {
  margin: 20px;
  padding: 50px 150px;
}
</style>
